<template>
  <a-layout id="components-layout-demo-basic">
    <a-layout-header :class="collapsed ? 'lay-headtwo' : 'lay-headone'" style="background-color:#ffffff; height: 47px;padding: 0;position: relative;">
      <a-icon
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="() => (collapsed = !collapsed)"
      />
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item v-if="menuTitle=='数据看板'">数据看板</a-breadcrumb-item>
        <template v-else>
          <a-breadcrumb-item><a @click="goHome">数据看板</a></a-breadcrumb-item>
          <a-breadcrumb-item style="color: rgba(0,0,0,0.65)">{{fatherMenuTitle}}</a-breadcrumb-item>
          <a-breadcrumb-item>{{menuTitle}}</a-breadcrumb-item>
        </template>
      </a-breadcrumb>
      <a-dropdown class="dropdown" style="float: right;margin-right: 80px">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          <!--          <a-avatar size="small" icon="user"/>-->
          <img class="head" src="../assets/head.jpg" alt="用户头像">
          {{ userName }}
          <a-icon type="down"/>
        </a>
        <a-menu slot="overlay">
          <a-menu-item key="0">
            <a target="_blank" rel="noopener noreferrer" @click="getUserInfo"
            >个人信息</a
            >
          </a-menu-item>
          <a-menu-item key="2">
            <a target="_blank" rel="noopener noreferrer" @click="updatePassword"
            >修改密码</a
            >
          </a-menu-item>
          <a-menu-item key="1">
            <a target="_blank" rel="noopener noreferrer" @click="showConfirm"
            >退出登录</a
            >
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </a-layout-header>

    <a-layout>
      <a-layout-sider
        v-model="collapsed"
        :trigger="null"
        collapsible
        class="sider"
        :class="collapsed ? 'lay-sidertwo' : 'lay-siderone'"
      >
        <div class="header-title">
          <span v-if="!collapsed">学习答题管理平台</span>
          <span class="title-abbr" v-else>MES</span>
        </div>
        <a-menu
          v-model="$store.state.selectedKeys"
          @click="menuClick"
          mode="inline"
          theme="dark"
          @openChange="openChange"
          :open-keys="$store.state.openKeys"
        >
          <template v-for="item in $store.state.menuList">
            <a-menu-item
              v-if="!item.subMenu.length && item.hasMenu"
              :key="item.function_id"
            >
              <router-link :to="item.function_url">
                <span class="anticon">
                  <i class="iconfont" :class="'icon-'+item.ico_name"></i>
                </span>
                <span>{{ item.function_name }}</span>
              </router-link>
            </a-menu-item>
            <a-sub-menu
              v-if="item.subMenu.length && item.hasMenu"
              :key="item.function_id"
            >
              <span slot="title"
              >
                <span class="anticon">
                  <i class="iconfont" :class="'icon-'+item.ico_name"></i>
                </span>
                <span>{{
                    item.function_name
                  }}</span></span
              >
              <template v-for="subMenu in item.subMenu">
                <a-menu-item v-if="subMenu.hasMenu" :key="subMenu.function_id">
                  <router-link :to="subMenu.function_url">{{
                      subMenu.function_name
                    }}
                  </router-link>
                </a-menu-item>
              </template>
            </a-sub-menu>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout :class="collapsed ? 'lay-maintwo' : 'lay-mainone'">
        <div class="tabs-header">
          <a-tabs
            v-model="$store.state.activeKey"
            hide-add
            type="editable-card"
            @edit="onEdit"
            @change="onChangeTab"
            :tabBarGutter="0"
            class="lay-home-tag"
          >
            <a-tab-pane
              v-for="pane in $store.state.panes"
              :key="pane.key"
              :tab="pane.title"
              :closable="pane.closable"
              class="lay-tab-pane"
            >
            </a-tab-pane>
          </a-tabs>
        </div>
        <a-layout-content
          class="lay-content"
          :style="{ minHeight: `${height}px` }"
        >
          <a-spin
            v-if="loadingMenu"
            class="loadingMenu"
            :spinning="loadingMenu" />
          <keep-alive :include="'home,'+cacheData">
            <router-view></router-view>
          </keep-alive>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <div>
      <a-modal centered="true" v-model="visible" title="修改个人信息" @ok="updateUserInfo">
        <!--        <div class="avatar-box">-->
        <!--          <img class="avatar-icon" src="../assets/avatar-icon.png" alt="">-->
        <!--          <a-upload-->
        <!--            name="avatar"-->
        <!--            list-type="picture-card"-->
        <!--            class="avatar-uploader"-->
        <!--            :show-upload-list="false"-->
        <!--            :before-upload="beforeUpload"-->
        <!--            :customRequest="selfUpload"-->
        <!--          >-->
        <!--            <img class="avatar" v-if="imageUrl" :src="imageUrl" alt="avatar" />-->
        <!--            <div v-else>-->
        <!--              <a-icon :type="loading ? 'loading' : 'plus'" />-->
        <!--              <div class="ant-upload-text">-->
        <!--                Upload-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </a-upload>-->
        <!--        </div>-->
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="form" class="lay-drawer-form">
          <a-form-model-item label="用户账号" prop="userCode">
            <a-input v-model="form.userCode" disabled="disabled"/>
          </a-form-model-item>
          <a-form-model-item label="用户姓名" prop="userName">
            <a-input v-model="form.userName"/>
          </a-form-model-item>
          <a-form-model-item label="工号" prop="jobNo">
            <a-input v-model="form.jobNo"/>
          </a-form-model-item>
          <a-form-model-item label="手机号码" prop="mobilePhone">
            <a-input v-model="form.mobilePhone"/>
          </a-form-model-item>
          <a-form-model-item label="单位部门" prop="organizationId">
            <a-tree-select
              v-model="form.organizationId"
              :treeData="treeData"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :replaceFields="{ key:'organizationId',title:'organizationName',value:'organizationId'}"
              placeholder="请选择所在部门"
              tree-default-expand-all
            >
            </a-tree-select>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <a-modal centered="true" width="385px" v-model="phoneVisible" title="手机验证" @ok="phoneValid">

        <a-form-model-item >
          <a-input  type="text" v-model="form.mobilePhone" disabled="true" :placeholder="'手机号'">
            <a-icon slot="prefix" type="mobile" />
          </a-input>
        </a-form-model-item>

        <a-row :gutter="16">
          <a-col class="gutter-row" :span="19">
            <a-form-model-item >
              <a-input  type="text" v-model="code" :placeholder="'验证码'"  v-decorator="['captcha', {rules: [{ required: true, message: '请输入输入验证码' }], validateTrigger: 'blur'}]">
                <a-icon slot="prefix" type="mail" />
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col class="gutter-row" :span="5">
            <a-button
              style="position: relative;top: 4px;width: 58px"
              class="getCaptcha"
              tabindex="-1"
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              v-text="!state.smsSendBtn&&'获取'  || (state.time+' s')"
            ></a-button>
          </a-col>
        </a-row>
      </a-modal>

      <a-modal
        centered="true"
        v-model="visibleUpdatePassword"
        title="修改密码"
        @ok="updateUserPass"
      >
        <a-form-model
          ref="loginForm"
          :model="loginForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :rules="rules"
          class="demo-ruleForm"
        >
          <a-form-model-item label="旧密码" prop="oldPasswd">
            <a-input
              v-model="loginForm.oldPasswd"
              type="password"
              placeholder="请输入旧密码"
            />
          </a-form-model-item>
          <a-form-model-item label="新密码" prop="passwd">
            <a-input
              v-model="loginForm.passwd"
              type="password"
              placeholder="请输入新密码"
              autocomplete="new-password"
            />
          </a-form-model-item>
          <a-form-model-item label="确认新密码" prop="passwds">
            <a-input
              v-model="loginForm.passwds"
              type="password"
              placeholder="请再次输入密码"
              autocomplete="new-password"
            />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </a-layout>
</template>

<script>
import {req} from "../api/axiosFun";
import {Decrypt} from '../../build/cryptoUtil.js'
import {getBase64,download} from "../until";
import NoteModal from './base/home/NoteModal'
import axios from "axios";
export default {
  name: "Main",
  components:{
    NoteModal
  },
  data() {
    let checkPhone = (rule, value, callback) => {
      var isMob = /^[1][3,4,5,6,7,8][0-9]{9}$/;
      if (!value) {
        callback(new Error("请输入手机号码"));
      } else if (!isMob.test(value)) {
        callback(new Error("手机号码格式错误"));
      }
      callback();
    };
    let validatePass = (rule, value, callback) => {
      let validateResult = /^(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]{8,30}$/;
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (!validateResult.test(value)) {
        callback("请输入8位以上英文+数字");
      }else if (value === this.loginForm.oldPasswd) {
        callback(new Error("新旧密码不能相同"));
      } else {
        if (this.loginForm.passwds !== "") {
          this.$refs.loginForm.validateField("passwds");
        }
        callback();
      }
      callback();
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.loginForm.passwd) {
        callback(new Error("两次密码不相同"));
      }
      callback();
    };
    return {
      collapsed: false,
      fatherMenuTitle:'',//面包屑父级导航
      menuTitle:'数据看板',//面包屑当前导航
      visible: false,
      visibleUpdatePassword: false,
      title: '',
      visibleNote: false,
      labelCol: {span: 5},
      wrapperCol: {span: 18},
      userName: "",
      companyDeptTree: [],
      treeData: [],
      cacheData:[],
      rules: {
        userName: [
          {required: true, message: "请输入用户姓名", trigger: "blur"}
        ],
        mobilePhone: [
          {required: true, validator: checkPhone, trigger: "blur"}
        ],
        organizationId: [
          {required: true, message: "请选择单位部门", trigger: "change"}
        ],
        phone: [{validator: checkPhone, trigger: "blur"}],
        oldPasswd: [
          {required: true, message: "请输入旧密码", trigger: "blur"}
        ],
        passwd: [{required: true, message: "请输入新密码", trigger: "blur"}],
        passwds: [{required: true, validator: validatePass2, trigger: "blur"}]
      },
      height: `${document.documentElement.clientHeight}` - 200,
      imageUrl: require('@/assets/head.jpg'),//头像
      form: {
        userCode: "",
        userName: "",
        jobNo: "",
        mobilePhone: "",
        organizationId: ""
      },
      loginForm: {
        passwd: "",
        passwds: "",
        oldPasswd: ""
      },
      defaultPhone: '',
      state: {
        time: 60,
        loginBtn: false,
        // login type: 0 email, 1 username, 2 telephone
        loginType: 0,
        smsSendBtn: false
      },
      phoneVisible: false,
      code:'',
      checkCode:'',
      isCheckCode: false,
      appVersion:'',
      todoNum: 0,//待办数量
      loadingMenu: false
    };
  },
  computed:{
    function_id_home(){
      var function_id= '';
      this.$store.state.menuList.forEach(item=>{
        if(item.function_name == '数据看板'){
          function_id = item.function_id
        }
      })
      return function_id
    }
  },
  watch: {
    visible: function (newVal, oldVal) {
      if (!newVal) {
        this.$refs["form"].resetFields();
      }
    },
    visibleUpdatePassword: function (newVal, oldVal) {
      if (!newVal) {
        this.$refs["loginForm"].resetFields();
      }
    }
  },
  mounted() {
    this.getMenu();
    this.getUserInfoOnload();
    this.getCompanyAndDeptTree();
  },
  methods: {
    /* 获取app版本信息 */
    getAppVersion() {
      return new Promise((resolve, reject) => {
        req('post', '/login/getAppVersion')
          .then(res => {
            if (res.result === 'success') {
              this.appVersion = res.appVersion;
              resolve()
            }
          });
      })
    },
    async downloadApp() {
      await this.getAppVersion();
      var url = axios.defaults.baseURL+'/app/app-release_'+this.appVersion+'.apk'
      download(url)
    },
    getMoreNote(){
      this.$router.push({ path: '/todo' });
    },
    selfUpload({ action, file, onSuccess, onError, onProgress }) {
      getBase64(file, imageUrl => {
        this.imageUrl = imageUrl;
      });
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    // onChange(value, label, extra) {
    //   if (value) {
    //     let split = value.split("-");
    //     this.form.companyId = parseInt(split[0]);
    //     this.form.departmentId = parseInt(split[1]);
    //   }
    // },
    /* 单位部门树 */
    getCompanyAndDeptTree() {
      req('post', '/organization/getOrganizationList', {})
        .then(res => {
          if (res.result === 'success') {
            let data = res.data;
            this.treeData = data;
            this.expandedKeys = [data[0].organizationId];
          }
        });
    },
    /* 生成单位部门下拉框 */
    createCompanySelect() {
      let treeData = this.treeData;
      let companyDeptTree = [];
      treeData.forEach((tree, index) => {
        //单位
        let company = {value: tree.key, label: tree.title};
        let children = [];
        //部门
        tree.children.forEach((dept, i) => {
          children.push({value: dept.key, label: dept.title});
        });
        company.children = children;
        companyDeptTree.push(company);
        this.companyDeptTree = companyDeptTree;
      });
    },
    /* SubMenu 展开/关闭的回调 */
    openChange(openKeys) {
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]];
        this.$store.commit("setOpenKeys", [openKeys[1]]);
      } else {
        this.$store.commit("setOpenKeys", [""]);
      }
    },
    goHome(){
      var activeKey = this.function_id_home
      this.$store.commit("setActiveKey", activeKey);
      this.$store.commit("setSelectedKeys", [activeKey]);
      this.$router.push('/home');
    },
    /* tab标签页切换时路由到对应组件 */
    onChangeTab(activeKey) {
      let targetPath = "";
      this.$store.getters.getMenuList.forEach((menu, index) => {
        if (menu.subMenu && menu.subMenu.length) {
          menu.subMenu.forEach((sub, i) => {
            if (sub.function_id === activeKey) {
              this.fatherMenuTitle = menu.function_name
              this.menuTitle = sub.function_name
              targetPath = sub.function_url;
            }
          });
        } else {
          if (menu.function_id === activeKey) {
            this.menuTitle = menu.function_name
            targetPath = menu.function_url;
          }
        }
      });
      this.$store.commit("setSelectedKeys", [activeKey]);
      this.$router.push(targetPath);
    },
    /* 新增和删除页签的回调，在 type="editable-card" 时有效 */
    onEdit(targetKey, action) {
      // 删除标签页
      this[action](targetKey);
    },
    /* 删除标签页 */
    remove(targetKey) {
      let activeKey = this.$store.state.activeKey;
      let lastIndex;
      let pane;
      this.$store.state.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
          //移除关闭标签页的缓存
          let removeCache=this.uppercaseUrl(pane.content.function_url)
          this.cacheData = this.cacheData.filter((x) => x !== removeCache);
        }
      });
      const panes = this.$store.state.panes.filter(pane => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          pane = panes[lastIndex];
          activeKey = panes[lastIndex].key;
        } else {
          pane = panes[0];
          activeKey = panes[0].key;
        }
        this.$store.state.menuList.forEach(item=>{
          if(item.function_id == pane.content.parent_id){
            this.fatherMenuTitle = item.function_name
          }
        })
        this.menuTitle = pane.title
        this.$router.push(pane.content.function_url);
      }
      this.$store.commit("setPanes", panes);
      this.$store.commit("setActiveKey", activeKey);
      this.$store.commit("setSelectedKeys", [activeKey]);
    },
    /* 获取菜单列表 */
    getMenu() {
      this.loadingMenu = true
      let path = this.$route.path;
      this.$store.dispatch("menuList", path).then(res => {
        let defaultMenu = this.uppercaseUrl(res);
        if ('Home' != defaultMenu) {
          this.cacheData.push(defaultMenu);
        }
        this.loadingMenu = false
      });
    },
    /* 菜单点击事件，打开新的标签页 */
    menuClick(callback) {
      const key = callback.key;
      const panes = this.$store.state.panes;
      const menuList = this.$store.state.menuList;
      let clickMenu = {};
      const activeKey = key;
      let flag = false;
      // 校验是否已经打开该标签页，已打开的话直接跳转到该标签页
      panes.forEach((pane, i) => {
        if (activeKey === pane.key) {
          this.menuTitle = pane.title
          this.$store.commit("setActiveKey", activeKey);
          flag = true;
        }
      });
      if (flag) {
        return false;
      }
      // 获取该标签页的title，从菜单名称中获取
      menuList.forEach((menu, index) => {
        if (menu.subMenu && menu.subMenu.length) {
          menu.subMenu.forEach((sub, i) => {
            if (sub.function_id === key) {
              this.fatherMenuTitle = menu.function_name
              this.menuTitle = sub.function_name
              clickMenu = sub;
            }
          });
        } else {
          if (menu.function_id === key) {
            this.menuTitle = menu.function_name
            clickMenu = menu;
          }
        }
      });
      //缓存新打开的标签页
      let cacheValue = this.uppercaseUrl(clickMenu.function_url);
      this.cacheData.push(cacheValue);
      // 打开一个新的标签页
      panes.push({
        title: clickMenu.function_name,
        content: clickMenu,
        key: activeKey,
        closable: true
      });
      this.$store.commit("setPanes", panes);
      this.$store.commit("setActiveKey", activeKey);
    },
    /* 获取用户信息 */
    getUserInfo() {
      req("post", `user/getLoginUserInfo`, this.form).then(res => {
        if (res.result === "success") {
          this.visible = true;
          this.form.userCode = res.data.user_code;
          this.form.userName = res.data.user_name;
          this.form.mobilePhone = res.data.mobile_phone;
          this.form.jobNo= res.data.job_no
          this.defaultPhone = res.data.mobile_phone;
          this.userName = res.data.user_name;
          this.form.organizationId = res.data.organization_id;
        }
      });
    },
    // 打开修改密码页面
    updatePassword() {
      this.loginForm.passwd = "";
      this.loginForm.passwds = "";
      this.loginForm.oldPasswd = "";
      this.visibleUpdatePassword = true;
    },
    // 修改用户信息
    updateUserInfo() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.mobilePhone != this.defaultPhone) {
            this.$message.warning('检测手机号发生变更,请验证新手机号');
            this.code = '';
            this.phoneVisible = true;
            return;
          }
          req("post", `/user/updateUserInfo`, this.form).then(res => {
            if (res.result === "success") {
              this.visible = false;
              this.getUserInfoOnload();
              this.$message.success("修改成功");
            } else if (res.result === "failed") {
              // this.$message.warn(res.message);
            } else {
              // this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    updateUserPass() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          req("post", `/user/updatePassword`, this.loginForm).then(res => {
            if (res.result === "success") {
              this.loginForm.passwd = "";
              this.loginForm.passwds = "";
              this.loginForm.oldPasswd = "";
              this.visibleUpdatePassword = false;
              this.$message.success("修改成功");
            } else if (res.result === "failed") {
              // this.$message.warn(res.message);
            } else {
              // this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    // 获取用户名称
    getUserInfoOnload() {
      req("post", `/user/getLoginUserInfo`, this.form).then(res => {
        if (res.result === "success") {
          this.userName = res.data.user_name;
        }
      });
    },
    showConfirm() {
      let that = this;
      this.$confirm({
        title: "提示",
        centered:true,
        content: h => <div style="color:red;">确认注销并退出系统吗？</div>,
        onOk() {
          return new Promise((resolve, reject) => {
            req("post", `/login/signOut`, "").then(res => {
              if (res.result === "success") {
                localStorage.setItem('token', '');
                that.$router.push("/");
                resolve()
              } else {
                reject()
              }
            });
          });
        }
      });
    },
    getCaptcha (e) {
      e.preventDefault()
      const { state } = this

      state.smsSendBtn = true

      const interval = window.setInterval(() => {
        if (state.time-- <= 0) {
          state.time = 60
          state.smsSendBtn = false
          window.clearInterval(interval)
        }
      }, 1000)
      req("post", `/user/validPhone`, {phone:this.form.mobilePhone}).then(res => {
        if (res.result === "success") {
          this.$message.success('发送成功')
          this.checkCode = Decrypt(res.code);
        } else if (res.result === "failed") {
          // this.$message.warn(res.message);
        } else {
          // this.$message.error(res.message);
        }
      });

    },
    phoneValid() {
      if (this.code == '') {
        this.$message.warning('请输入验证码后校验');
      }else if (this.code == this.checkCode) {
        this.defaultPhone = this.form.mobilePhone;
        this.phoneVisible = false;
        this.updateUserInfo();
      }else{
        this.$message.error('验证码错误');
      }
    },
    //url转为对应vue文件名称(缓存标签页使用)
    uppercaseUrl(url) {
      let cacheValue = url.slice(1, url.length);
      const characters = [...cacheValue];
      characters[0] = characters[0].toUpperCase();
      cacheValue = characters.join("");
      return cacheValue;
    }
  }
};
</script>

<style lang="less" scoped>
.ant-layout-header {
  z-index: 5;
}
.lay-headone {
  margin-left: 220px;
  width: calc(100% - 220px);
}
.lay-headtwo {
  margin-left: 60px;
  width: calc(100% - 60px);
}
.header-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 47px;
  color: #fff;
  text-align: center;
}
.title-abbr {
  display: inline-block;
  width: 60px;
  text-align: center;
  margin-right: 160px;
}
.head {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 5px;
}
#components-layout-demo-basic .trigger {
  font-size: 18px;
  position: absolute;
  line-height: 52px;
  left: 6px;
  /*transform: translate(100%, 75%);*/
  /*padding: 10px 0;*/
  cursor: pointer;
  transition: color 1s;
}

#components-layout-demo-basic .trigger:hover {
  color: #0092FC;
}
.breadcrumb {
  position: absolute;
  left: 45px;
  line-height: 47px;
}
/*//修改侧边栏宽度样式*/
/deep/ .ant-menu {
  color: #fff;
}
.lay-siderone {
  position: absolute;
  width: 200px;
  left: 0;
  top: 0px;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none!important;
    text-align: center!important;
  }

}

.lay-sidertwo {
  position: absolute;
  width: 60px;
  left: 0;
  top: 0px;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none!important;
    text-align: center!important;
  }

}
.sider {
  width: 220px!important;
  max-width: 220px!important;
}

.dropdown {
  color: #0092FC;
  transform: translate(50%, -15%);
}
.header-note,.header-download {
  position: absolute;
  right: 170px;
  top: 0;
  display: flex;
  align-items: center;
  height: 47px;
  cursor: pointer;
}
.header-download {
  right: 205px;
}

.lay-mainone {
  position: absolute;
  left: 220px;
  top: 47px;
  right: 0;
  /*bottom:0;*/
  height: 100%;
  overflow: hidden;
}

.lay-maintwo {
  position: absolute;
  left: 60px;
  top: 47px;
  right: 0;
  /*bottom:0;*/
  height: 100%;
  overflow: hidden;
}

.lay-content {
  position: relative;
  float: left;
  /*margin: 10px 16px;
  padding: 24px;*/
  /*background: #fff;*/
  height: 100%;
  /*width: 100%;*/
  overflow-y: auto;
  overflow-x: hidden;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}
.lay-content::-webkit-scrollbar { width: 0 !important }
.loadingMenu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 90%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f2f5;
}
.tabs-header {
  height: 30px;
  line-height: 30px;
}

.lay-home-tag {
  height: 30px;
  line-height: 30px;
}

/deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  height: 35px;
  line-height: 30px;
}

/deep/ .ant-menu-inline-collapsed > .ant-menu-item,
.ant-menu-inline-collapsed
> .ant-menu-item-group
> .ant-menu-item-group-list
> .ant-menu-item,
.ant-menu-inline-collapsed
> .ant-menu-item-group
> .ant-menu-item-group-list
> .ant-menu-submenu
> .ant-menu-submenu-title,
.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
  left: 0;
  padding: 0 20px !important;
  text-overflow: clip;
  margin: 0;
}

/deep/
.ant-menu-inline-collapsed
> .ant-menu-submenu
> .ant-menu-submenu-title {
  left: 0;
  padding: 0 20px !important;
  text-overflow: clip;
}
/deep/
.ant-layout-sider {
  background: linear-gradient(top,#0147f8,#0130F8);
}
/deep/
.ant-menu-dark{
  background: none;
}
/deep/ .ant-menu-dark .ant-menu-inline.ant-menu-sub {
  background-color: #212f52;
}
/deep/ .ant-menu-dark .ant-menu-item, /deep/ .ant-menu-dark .ant-menu-item-group-title, /deep/ .ant-menu-dark .ant-menu-item > a {
  color: #fff;
  background: none;
  height: 36px;
  line-height: 36px;
}
/deep/ .ant-menu .ant-menu-item-selected {
  background: #0130F8;
}
/deep/ .ant-menu-dark .ant-menu-sub .ant-menu-item > a {
  margin-left: 15px;
}
/deep/ .ant-menu-submenu-title .ant-menu-submenu-arrow {
  right: 25px;
}

.logo {
  width: 36px;
  height: auto;
  margin-right: 5px;
}
/*用户头像*/
.avatar-box {
  position: relative;
  width: 100px;
  height: 100px;
  /*padding-left: 20px;*/
  margin: 10px auto 30px;
  border-radius: 50%;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.avatar-icon{
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 31px;
  height: 31px;
}
/deep/ .ant-dropdown-menu-item {
  text-align: center;
}
/deep/ .avatar-box .ant-upload.ant-upload-select-picture-card {
  background: #fff;
  border: none;
}

@media screen and (max-width: 1440px) {
  .sider {
    width: 200px!important;
  }
  .lay-mainone {
    left: 200px;
  }
  .lay-headone {
    margin-left: 200px;
    width: calc(100% - 200px);
  }
  .header-title {
    font-size: 14px;
  }
}

</style>
